<template>
  <div class="cesium-draw">
    <div id="cesium-drawer" />
    <div class="mouse-postion">{{ nowPostion.wgs84 }}</div>
    <a-dropdown>
      <a class="ant-dropdown-link tools" @click.prevent>
        {{ drawingModeText }}<DownOutlined />
      </a>
      <template #overlay>
        <a-menu @click="handleMenuClick">
          <a-menu-item key="rain">雨</a-menu-item>
          <a-menu-item key="snow">雪</a-menu-item>
          <a-menu-item key="fog">雾</a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </div>
</template>

<script>
//参考：Cesium深入浅出之图层管理器
// https://blog.csdn.net/fywindmoon/article/details/113747843
import { DownOutlined, EditOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref, watch } from 'vue';
import * as Cesium from '@cesium/Source/Cesium.js';
import {createNavigation} from "@lib/g3x";

import { arcGisMapServerImageryProviderCreator, arcGisMapServerStreetMapImageryProviderCreator } from '@lib/provider/arcgis.js';
import {
  imgTileServiceImageryProviderCreator,
  vecTileServiceImageryProviderCreator,
  terTileServiceImageryProviderCreator,
  ciaTileServiceImageryProviderCreator,
  img_tdt_yx,
  img_tdt_sl,
  img_tdt_dx,
  img_tdt_anno,
  imageryProvider
} from '@lib/provider/tdt.js';

const imageryProviderViewModels = [img_tdt_yx(), img_tdt_dx(), img_tdt_sl(), img_tdt_anno()];

import MousePosition from '@functional/utils/mousePosition';
import SnowEffect from './lib/snow.js';
import RainEffect from './lib/rain.js';
import FogEffect from './lib/fog.js';

const keyMaps = {
  snow: '雪',
  rain: '雨',
  fog: '雾'
};

export default defineComponent({
  components: { DownOutlined, EditOutlined },
  setup() {
    return {
      viewer: null
    };
  },
  data() {
    return {
      drawingMode: '',
      effect: null,
      nowPostion: {}
    };
  },
  computed: {
    drawingModeText() {
      return keyMaps[this.drawingMode];
    }
  },
  watch: {
    drawingMode(val) {
      const { viewer } = this;
      if (!viewer) return;
      if (this.effect) {
        this.effect.destroy();
      }
      if (val === 'snow') {
        this.effect = new SnowEffect(viewer, {
          snowSize: 0.02, //雪大小 ，默认可不写
          snowSpeed: 60.0 //雪速，默认可不写
        });
      } else if (val === 'rain') {
        this.effect = new RainEffect(viewer, {
          snowSize: 0.02, //雪大小 ，默认可不写
          snowSpeed: 60.0 //雪速，默认可不写
        });
      } else if (val === 'fog') {
        this.effect = new FogEffect(viewer, {
          snowSize: 0.02, //雪大小 ，默认可不写
          snowSpeed: 60.0 //雪速，默认可不写
        });
      }
    }
  },
  mounted() {
    this.initViewer();
  },
  beforeUnmount() {
    if (this.viewer) {
      this.viewer.destroy();
      this.viewer = null;
    }
  },
  methods: {
    handleMenuClick(e) {
      this.drawingMode = e.key;
    },
    onViewerInited(viewer) {
      let vm = this;
      new MousePosition(viewer, pos => {
        vm.nowPostion = pos;
      });
      this.drawingMode = 'rain'
    },

    initViewer() {
      let vm = this;
      Cesium.Ion.defaultAccessToken = $accessToken.my;
      var viewer = new Cesium.Viewer('cesium-drawer', {
        // imageryProvider: osm,
        contextOptions: {
          webgl: {
            alpha: true
          }
        },
        animation: false,
        // baseLayerPicker: false,
        // imageryProvider: arcGisMapServerImageryProviderCreator(),
        // imageryProviderViewModels, //可供BaseLayerPicker选择的图像图层ProviderViewModel数组
        fullscreenButton: false,
        vrButton: false,
        homeButton: false,
        timeline: false,
        // imageryProvider: imgTileServiceImageryProviderCreator(),
        selectionIndicator: false,
        infoBox: false,
        // 注释时相当于使用默认地形，解开注释相当于使用全球地形
        terrainProvider: Cesium.createWorldTerrain()
      });

      createNavigation(viewer)

      this.viewer = viewer;

      // this.viewer.flyTo(this.viewer.entities);
      viewer.camera.setView({
        destination: new Cesium.Cartesian3(-548184.7982559408, 5512367.059463563, 3173625.2210259973),
        orientation: {
          heading: 5.683499859605618,
          pitch: -0.3430291183891061,
          roll: 6.281444671468591
        }
      });

      this.onViewerInited(viewer);
    }
  }
});
</script>

<style scoped lang="less">
// @import '~@components/cesium-navigation-es6/styles/cesium-navigation.css';

.cesium-draw {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: white;
  font-size: 14px;

  .tools {
    position: absolute;
    top: 57px;
    left: 7px;
    font-size: 14px;
    padding: 8px 12px;
    line-height: 16px;
    color: white;
    z-index: 9999;
    background-color: rgba(40, 48, 60, 1);
    border-radius: 3px;
    opacity: 0.6;
    transition: all 500ms;
    &:hover {
      opacity: 0.8;
    }
  }

  #cesium-drawer {
    width: 100%;
    height: 100%;
    overflow: hidden;
    :deep(.cesium-viewer-bottom) {
      display: none !important;
    }
  }

  .mouse-postion {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 14px;
    padding: 8px 12px;
    line-height: 16px;
    color: white;
    z-index: 9999;
    background-color: rgba(40, 48, 60, 1);
    border-radius: 3px;
    opacity: 0.8;
  }
}

.chart-container {
  position: absolute;
  bottom: 7px;
  left: 7px;
  background-color: rgba(0, 0, 0, 0.5);

  #profileChart {
    width: 600px;
    height: 300px;
  }
}
</style>
